﻿<Page
    x:Class="PhoneApplication.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:map="using:MapControl"
    xmlns:local="using:PhoneApplication"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Page.Resources>
        <map:TileLayerCollection x:Key="TileLayers">
            <!--
            TileLayers with OpenStreetMap data.
            -->
            <map:TileLayer SourceName="OpenStreetMap"
                           Description="Maps © [OpenStreetMap Contributors](http://www.openstreetmap.org/copyright)"
                           MaxZoomLevel="19">
                <map:TileSource UriFormat="http://{c}.tile.openstreetmap.org/{z}/{x}/{y}.png"/>
            </map:TileLayer>
            <map:TileLayer SourceName="Thunderforest OpenCycleMap"
                           Description="Maps © [Thunderforest](http://www.thunderforest.com/), Data © [OpenStreetMap Contributors](http://www.openstreetmap.org/copyright)">
                <map:TileSource UriFormat="http://{c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png"/>
            </map:TileLayer>
            <map:TileLayer SourceName="Thunderforest Landscape"
                           Description="Maps © [Thunderforest](http://www.thunderforest.com/), Data © [OpenStreetMap Contributors](http://www.openstreetmap.org/copyright)">
                <map:TileSource UriFormat="http://{c}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png"/>
            </map:TileLayer>
            <map:TileLayer SourceName="Thunderforest Outdoors"
                           Description="Maps © [Thunderforest](http://www.thunderforest.com/), Data © [OpenStreetMap Contributors](http://www.openstreetmap.org/copyright)">
                <map:TileSource UriFormat="http://{c}.tile.thunderforest.com/outdoors/{z}/{x}/{y}.png"/>
            </map:TileLayer>
            <map:TileLayer SourceName="Thunderforest Transport"
                           Description="Maps © [Thunderforest](http://www.thunderforest.com/), Data © [OpenStreetMap Contributors](http://www.openstreetmap.org/copyright)">
                <map:TileSource UriFormat="http://{c}.tile.thunderforest.com/transport/{z}/{x}/{y}.png"/>
            </map:TileLayer>
            <map:TileLayer SourceName="Thunderforest Transport Dark"
                           Description="Maps © [Thunderforest](http://www.thunderforest.com/), Data © [OpenStreetMap Contributors](http://www.openstreetmap.org/copyright)"
                           Foreground="White" Background="Black">
                <map:TileSource UriFormat="http://{c}.tile.thunderforest.com/transport-dark/{z}/{x}/{y}.png"/>
            </map:TileLayer>
            <map:TileLayer SourceName="MapQuest OpenStreetMap"
                           Description="Maps © [MapQuest](http://www.mapquest.com/), Data © [OpenStreetMap Contributors](http://www.openstreetmap.org/copyright)">
                <map:TileSource UriFormat="http://otile{n}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png"/>
            </map:TileLayer>
            <map:TileLayer SourceName="Seamarks" Description="© OpenSeaMap Contributors"
                           MinZoomLevel="10" MaxZoomLevel="18">
                <map:TileSource UriFormat="http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png"/>
            </map:TileLayer>

            <!--
            Bing Maps TileLayers with tile URLs retrieved from the Imagery Metadata Service
            (see http://msdn.microsoft.com/en-us/library/ff701716.aspx).
            A Bing Maps API Key (see http://msdn.microsoft.com/en-us/library/ff428642.aspx) is required
            for using these layers and must be assigned to the static BingMapsTileLayer.ApiKey property.
            -->
            <map:BingMapsTileLayer SourceName="Bing Maps Road"
                                   Description="Bing Maps - © Microsoft Corporation"
                                   Mode="Road" MaxZoomLevel="19"/>
            <map:BingMapsTileLayer SourceName="Bing Maps Aerial"
                                   Description="Bing Maps - © Microsoft Corporation"
                                   Mode="Aerial" MaxZoomLevel="19" Foreground="White" Background="Black"/>
            <map:BingMapsTileLayer SourceName="Bing Maps Hybrid"
                                   Description="Bing Maps - © Microsoft Corporation"
                                   Mode="AerialWithLabels" MaxZoomLevel="19" Foreground="White" Background="Black"/>
        </map:TileLayerCollection>
        <local:ObjectReferenceConverter x:Key="ObjectReferenceConverter"/>
    </Page.Resources>
    <Grid>
        <map:MapBase x:Name="map" ZoomLevel="11" MinZoomLevel="2"
                     TileLayer="{Binding [OpenStreetMap], Source={StaticResource TileLayers}}"
                     ManipulationMode="Scale,TranslateX,TranslateY,TranslateInertia"
                     ManipulationStarted="MapManipulationStarted"
                     ManipulationDelta="MapManipulationDelta">
            <map:MapBase.Center>
                <map:Location Latitude="53.5" Longitude="8.2"/>
            </map:MapBase.Center>

            <map:MapGraticule Opacity="0.6"/>

            <Canvas map:MapPanel.Location="{Binding Location}"
                    Visibility="{Binding Location, Converter={StaticResource ObjectReferenceConverter}}">
                <Path Fill="{StaticResource PhoneAccentBrush}" Opacity="0.2">
                    <Path.Data>
                        <EllipseGeometry RadiusX="{Binding Accuracy}" RadiusY="{Binding Accuracy}"
                                         Transform="{Binding ScaleTransform, ElementName=map}"/>
                    </Path.Data>
                </Path>
                <Path Fill="{StaticResource PhoneAccentBrush}">
                    <Path.Data>
                        <EllipseGeometry RadiusX="10" RadiusY="10"/>
                    </Path.Data>
                </Path>
                <Path Stroke="White" StrokeThickness="3">
                    <Path.Data>
                        <EllipseGeometry RadiusX="6" RadiusY="6"/>
                    </Path.Data>
                </Path>
            </Canvas>
        </map:MapBase>

        <Border HorizontalAlignment="Stretch" VerticalAlignment="Top" Background="#7F000000">
            <TextBlock Margin="2" FontSize="12" map:HyperlinkText.InlinesSource="{Binding TileLayer.Description, ElementName=map}"/>
        </Border>
    </Grid>

    <Page.BottomAppBar>
        <CommandBar>
            <AppBarButton Label="Map">
                <AppBarButton.Icon>
                    <PathIcon Width="40" Height="40">
                        <PathIcon.Data>
                            <GeometryGroup>
                                <RectangleGeometry Rect="10,10,9,9"/>
                                <RectangleGeometry Rect="21,10,9,9"/>
                                <RectangleGeometry Rect="10,21,9,9"/>
                                <RectangleGeometry Rect="21,21,9,9"/>
                            </GeometryGroup>
                        </PathIcon.Data>
                    </PathIcon>
                </AppBarButton.Icon>
                <AppBarButton.Flyout>
                    <MenuFlyout>
                        <MenuFlyoutItem Text="OpenStreetMap" Tag="OpenStreetMap" Click="MapMenuItemClick"/>
                        <MenuFlyoutItem Text="OpenCycleMap" Tag="Thunderforest OpenCycleMap" Click="MapMenuItemClick"/>
                        <MenuFlyoutItem Text="Landscape" Tag="Thunderforest Landscape" Click="MapMenuItemClick"/>
                        <MenuFlyoutItem Text="Outdoors" Tag="Thunderforest Outdoors" Click="MapMenuItemClick"/>
                        <MenuFlyoutItem Text="Transport" Tag="Thunderforest Transport" Click="MapMenuItemClick"/>
                        <MenuFlyoutItem Text="Transport Dark" Tag="Thunderforest Transport Dark" Click="MapMenuItemClick"/>
                        <MenuFlyoutItem Text="MapQuest Open" Tag="MapQuest OpenStreetMap" Click="MapMenuItemClick"/>
                        <!--<MenuFlyoutItem Text="Bing Maps Road" Tag="Bing Maps Road" Click="MapMenuItemClick"/>
                        <MenuFlyoutItem Text="Bing Maps Aerial" Tag="Bing Maps Aerial" Click="MapMenuItemClick"/>
                        <MenuFlyoutItem Text="Bing Maps Hybrid" Tag="Bing Maps Hybrid" Click="MapMenuItemClick"/>-->
                    </MenuFlyout>
                </AppBarButton.Flyout>
            </AppBarButton>
            <AppBarToggleButton Label="Seamarks" Checked="SeamarksChecked" Unchecked="SeamarksUnchecked">
                <AppBarToggleButton.Icon>
                    <PathIcon Width="40" Height="40" Data="M20,15 l5,-6 -10,0Z M20,15 l5,6 -10,0Z M21.5,23 l0,10 -3,0 0,-10Z"/>
                </AppBarToggleButton.Icon>
            </AppBarToggleButton>
            <AppBarButton Label="Center" Click="CenterButtonClick"
                          IsEnabled="{Binding Location, Converter={StaticResource ObjectReferenceConverter}}">
                <AppBarButton.Icon>
                    <PathIcon Width="40" Height="40">
                        <PathIcon.Data>
                            <GeometryGroup>
                                <EllipseGeometry Center="20,20" RadiusX="10" RadiusY="10"/>
                                <EllipseGeometry Center="20,20" RadiusX="6" RadiusY="6"/>
                            </GeometryGroup>
                        </PathIcon.Data>
                    </PathIcon>
                </AppBarButton.Icon>
            </AppBarButton>
        </CommandBar>
    </Page.BottomAppBar>
</Page>
